<template>
	<view class="content">
		<view style="width: 100%;">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					开始时间
				</view>
				<view class="uni-list-cell-db">
					<picker :value="start" :range="array" @change="bindPickerChange">
						<view class="uni-input">{{array[start]}}</view>
					</picker>
				</view>
			</view>
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					结束时间
				</view>
				<view class="uni-list-cell-db">
					<picker :value="end" :range="array" @change="bindEndDateChange">
						<view class="uni-input">{{array[end]}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		<qiun-data-charts ref='chart' type="line" :opts="opts" :chartData="chartData"  :ontouch="true" :onzoom="true"/>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		watch
	} from 'vue';
	const start = ref(0)
	const end = ref(0)
	const chart = ref(null)
	const data = ref([])
	const opts = reactive({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 10, 0, 15],
		enableScroll: true,
		dataLabel: false,
		enableZoom: true,    // 允许双指缩放
		update: true,
		legend: {},
		xAxis: {
			gridType: "dash",
			disableGrid: false,
			scrollShow: true,
			splitNumber: 13,
			itemCount: 13,
			scrollAlign: 'right', // 滚动到末尾
			fontSize: 10,
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2
		},
		extra: {
			line: {
				type: "curve",
				width: 2,
				activeType: "hollow"
			},
		},
		scrollPosition: 'right'
	})
	
	const startIndex = computed(() => {
		return data.value.indexOf(start.value)
	})
	const endIndex = computed(() => {
		return data.value.indexOf(end.value)
	})
	
	const dataC = computed(() => {
		return data.value.slice(start.value,end.value+1)
	})
	const array = computed(() => {
		return data.value.map(item => item.date)
	})
	watch(array,(val) => {
		end.value = val.length -1
		start.value = val.length - 20
	})
	
	const chartData = computed(() => {
		let szzsGz = []
		let szczGz = []
		let cybzGz = []
		let szzs5Gz = []
		let szcz5Gz = []
		let cybz5Gz = []
		let szzsZs = []
		let szczZs = []
		let cybzZs = []
		data.value.forEach(item => {
			szzsGz.push(lj(Number(item.szzs),Number(item.gz)))
			szczGz.push(lj(Number(item.szcz),Number(item.gz)))
			cybzGz.push(lj(Number(item.cybz),Number(item.gz)))
		})
		szzs5Gz = get5(szzsGz)
		szcz5Gz = get5(szczGz)
		cybz5Gz = get5(cybzGz)
		szzsZs = getZs(szzs5Gz)
		szczZs = getZs(szcz5Gz)
		cybzZs = getZs(cybz5Gz)
		const categories = dataC.value.map(item => {
			return item.date.split('-')[1]+'.'+item.date.split('-')[2]
		})
		
		return {
			categories,
			series: [{
				name: '上证指数',
				data: szzsZs.slice(start.value,end.value+1)
			},
			{
				name: '深圳成指',
				data: szczZs.slice(start.value,end.value+1)
			},{
				name: '创业板',
				data: cybzZs.slice(start.value,end.value+1)
			}]
		}
	})
	function getServerData() {
		uni.request({
			url: 'https://gitee.com/xiaochongv2/k-line/raw/master/data.json', 
			method: 'GET',
			success: (res) => {
				data.value = res.data
			}
		});
	}
	function lj(val, gz){
		if(val){
				return (1/val*100-gz)
		}
		return 0
	}
	
	function get5(list){
		return list.map((item,index,arr) => {
			return item - arr[index-5]||0
		})
	}
	function getZs(list){
		const arr = []
		list.forEach((item,index) => {
			arr.push(item + arr[index-1]||0)
		})
		return arr
	}
	
	function bindPickerChange(e){
		start.value = e.detail.value
	}
	function bindEndDateChange(e){
		end.value = e.detail.value
	}
	
	getServerData()
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.uni-list-cell {
		background-color: #fff;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		padding: 5px 0;
	}
	
	.uni-list-cell-left {
		white-space: nowrap;
		font-size: 14px;
		padding: 0 15px;
	}
	
	.uni-list-cell-db,
	.uni-list-cell-right {
		flex: 1;
	}
	
	.uni-picker-container {
		display: none;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		z-index: 999;
		font-size: 16px;
	}
</style>